<!--
 * @Description: 饼状图
 * @Author: Zhanghan
 * @Date: 2025-01-06 20:30:03
 * @LastEditTime: 2025-01-06 21:25:57
 * @LastEditors: Zhanghan
-->
<template>
  <div>
    <ProEchartsCard :option="options" @click-charts="chartClick" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { ProEchartsCard } from "@/components/ProComponents/index";

const options: any = {
  title: {
    text: "饼状图示例", //主标题
    subtext: "xxx", //副标题
    left: "center", //标题的水平位置
    textStyle: {
      color: "red",
    },
  },
  tooltip: {
    trigger: "item",
  },
  legend: {
    orient: "vertical",
    left: "left",
  },
  series: [
    {
      name: "数据来源",
      type: "pie",
      radius: "50%",
      data: [
        { value: 1048, name: "大学生", id: 1111 },
        { value: 735, name: "中学生", id: 22222 },
        { value: 580, name: "小学生", id: 3333 },
        { value: 484, name: "高中生", id: 4444 },
        { value: 300, name: "研究生", id: 55555 },
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)",
        },
      },
    },
  ],
};

const chartClick = (params: any) => {
    console.log(params);
}

</script>
